//获取两个input按钮
let file1 = document.getElementById('file1');
let file2 = document.getElementById('file2');
let show = document.getElementById("show");
let info = document.getElementById("info");
let num = 0;
let lens = 0;
let nums = 0;

file1.addEventListener("change", function () {
    let This = this;
    changes(This);
});
file2.addEventListener("change", function () {
    let This = this;
    changes(This);
});

function changes(This) {
    let len = This.files.length;

    for (let i = 0; i < len; i++) {
        add(i, This)
    }
    
    nums = (num / 1024 / 1024).toFixed(2);
    lens += len;
    if (lens >= 13) {
        alert("单次最多上传12张，超过上限！")
        return;
    } else {
        info.innerHTML = `已选中${lens}张图片，共${nums}MB`
    }
}

function add(i, This) {
    num += (This.files[i].size);
    console.log(num);

    let size = (This.files[i].size) / 1024;
    size = size.toFixed(2) + "KB";
    let files = new FileReader();
    files.readAsDataURL(This.files[i]);
    files.onload = function () {
        let src = files.result;
        show.innerHTML += `
        <div>
            <div>
                <p>${size}</p>
                <i></i>
            </div>
            <div>
                <img src="${src}" alt="">
            </div>
        </div>`;
        remove();
    }
}

function remove() {
    let divs = show.children;
    let del = show.getElementsByTagName("i");
    let oP = show.getElementsByTagName("p");
    for (let i = 0; i < del.length; i++) {
        del[i].addEventListener("click", function () {
            let str = oP[i].innerHTML;
            str = (Number(str.substring(0, str.length - 2)));
            num = Number(num) - Number(str) * 1024;
            num = (num < 0 ? 0 : num);
            console.log(num);

            nums = (num / 1024 / 1024).toFixed(2);
            lens--;
            console.log(nums);

            info.innerHTML = `已选中${lens}张图片，共${nums}MB`
            show.removeChild(divs[i])
            console.log(str);

        })
    }


}